<template>
    <div>
        <div class="header">
            <img src="../assets/images/confirm_order_03.png" alt="confirm_order_03.png"> 个人中心
        </div>
        <div class="banner"><img src="../assets/images/user1_02.png" alt="user1_02.png"></div>
        <div class="main">
            <div class="one">
                <img class="picture" src="../assets/images/user3_06.png" alt="user3_06.png"> 购买记录
                <img class="beauty" src="../assets/images/user4_08.png" alt="user4_08.png">
            </div>
            <div class="one">
                <img class="picture" src="../assets/images/images/user7_01_03.png" alt="user3_06.png"> 购买记录
                <img class="beauty" src="../assets/images/user4_08.png" alt="user4_08.png">
            </div>
            <div class="one">
                <img class="picture" src="../assets/images/images/user9_03.png" alt="user3_06.png"> 购买记录
                <img class="beauty" src="../assets/images/user4_08.png" alt="user4_08.png">
            </div>
            <div class="one">
                <img class="picture" src="../assets/images/images/user10_07.png" alt="user3_06.png"> 购买记录
                <img class="beauty" src="../assets/images/user4_08.png" alt="user4_08.png">
            </div>
            <div class="two">
                <img class="picture" src="../assets/images/user_07.png" alt="user3_06.png"> 购买记录
                <img class="beauty" src="../assets/images/user4_08.png" alt="user4_08.png">
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>
                    <img src="../assets/images/user4_03.png" alt="user4_03.png"> 主页
                </li>
                <li>
                    <img src="../assets/images/user5_03.png" alt="user5_03.png"> 分类
                </li>
                <li>
                    <img src="../assets/images/user6_03.png" alt="user6_03.png"> 购物车
                </li>
                <li>
                    <img src="../assets/images/user7_03.png" alt="user7_03.png"> 我的订单
                </li>
                <li class="alone">
                    <img src="../assets/images/user8_03.png" alt="user8_03.png"> 我
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  name: "UserPage",
  data() {
    return {
      msg: "hello"
    };
  },
  methods: {
    isLogin() {
      let username = this.LsyCookie.getItem("LoginUser");
      if (!username) {
        this.$router.push({ path: "/login" });
      }
    }
  },
  created() {
    this.isLogin();
  }
};
</script>

<style scoped lang="less">
.header {
  img {
    width: 24px;
    height: 44px;
    float: left;
    margin-top: 24px;
    margin-left: 20px;
  }
  text-align: center;
  line-height: 90px;
  background: #ff8f00;
  color: #ffffff;
  font-size: 40px;
}
.banner {
  img {
    width: 100%;
  }
}
.main {
  background: #e6e6e6;
  padding-top: 34px;
  padding-bottom: 92px;
  .one {
    font-size: 36px;
    line-height: 102px;
    background: #ffffff;
    margin-bottom: 20px;
    .picture {
      width: 44px;
      height: 46px;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 32px;
      float: left;
    }
    .beauty {
      width: 32px;
      height: 46px;
      float: right;
      margin-top: 30px;
      margin-right: 20px;
    }
  }

  .two {
    font-size: 36px;
    line-height: 102px;
    background: #ffffff;
    .picture {
      width: 44px;
      height: 46px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .beauty {
      width: 32px;
      height: 46px;
      float: right;
      margin-top: 30px;
      margin-right: 20px;
    }
  }
}
.footer {
  ul {
    li {
      background: #ff8f00;
      float: left;
      width: 149px;
      font-size: 24px;
      color: #ffffff;
      text-align: center;
      padding-bottom: 10px;
      img {
        width: 56px;
        height: 50px;
        display: block;
        margin-left: 44px;
        margin-top: 12px;
      }
    }
    .alone {
      width: 154px;
      background: #eab826;
      img {
        margin-left: 56px;
      }
    }
  }
}
</style>